<template>
  <div class="login-wrapper">
      <div class="video-background">
        <video autoplay loop muted playsinline>
          <source src="/src/assets/医院.mp4" type="video/mp4">
        </video>
      </div>
    <div class="login-content">
      <h2>云智慧医院管理系统</h2>
      <img class="tubiao" src="/src/assets/hospital.jpg" alt="">
      <el-form :model="lzwform" :rules="rules" ref="formobj" label-width="100px">
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="lzwform.phone" placeholder="请输入登陆手机号"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
          <el-input v-model="lzwform.password" placeholder="请输入登陆密码" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {reactive,ref} from "vue";
import  {post,get} from '@/util/axios.js'
import { useRouter } from 'vue-router';
import { EmployeeStore } from '@/stores/counter'
import VueCookie from 'vue-cookie'
const employee=EmployeeStore()
const router = useRouter();
const formobj=ref()
const rules=reactive({
  phone:[{required:true,message:'请输入登录手机号',trigger:'blur'}],
  password:[{required:true,message:'请输入登录密码',trigger:'blur'}]
})
const lzwform=reactive(
    {
      phone: '',
      password: ''
    }
);
function login(){
  post('/employee/login',lzwform,content=>{
    VueCookie.set('token',content,{expires:'3h'})
    router.push({
      path:"/index"
    })
  },formobj)
  get('/employee/getByPhone', {phone:lzwform.phone},content=>{
    employee.set(content)
  },formobj)
}


</script>

<style scoped lang="scss">
.login-wrapper{
  height: 100vh;
  wdith:100%;
  display: flex;
  justify-content: space-around;
  position: relative;
  .login-content{
    width: 500px;
    height: 350px;
    background-color: #ffffff;
    margin: auto;
    border-radius: 7px;
    margin-top: 10%;
    text-align: center;
    z-index: 10;
    opacity: 0.8;
    .tubiao{
      width: 25%;
      height: 30%;
    }
    h2{
      padding-top: 20px;
      text-align: center;
      letter-spacing: 0.52rem;
      color: #646cff;
    }
    .el-form{
      margin-top: 40px;
      margin-right: 40px;
    }
  }
  .video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .video-background video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: -1; /* 使视频在背景层 */
  }
}
</style>